<template>
  <view class="toolbox-container">
    <view class="toolbox">
      <!-- 工具箱顶部 -->
      <view class="toolbox-top">
        <view class="toolbox-handle"></view>
      </view>

      <!-- 工具箱主体 -->
      <view class="toolbox-body">
        <!-- 健康工具抽屉 -->
        <view class="drawer" :class="{ 'drawer-open': openDrawer === 'health' }">
          <view class="drawer-handle" @click="toggleDrawer('health')">
            <text class="drawer-title">健康工具</text>
            <text class="drawer-arrow">{{ openDrawer === 'health' ? '▼' : '▶' }}</text>
          </view>
          <view class="drawer-content" :class="{ 'drawer-content-open': openDrawer === 'health' }">
            <view class="tool-grid">
              <view class="tool-item" @click="navigateTo('/pages-sub/drink/index')">
                <image class="tool-icon" src="/static/icons/drink.png" mode="aspectFit"></image>
                <text class="tool-name">多喝水</text>
              </view>
              <view class="tool-item" @click="navigateTo('/pages-sub/poop/index')">
                <image class="tool-icon" src="/static/icons/poop.png" mode="aspectFit"></image>
                <text class="tool-name">上厕所</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 生活工具抽屉 -->
        <view class="drawer" :class="{ 'drawer-open': openDrawer === 'life' }">
          <view class="drawer-handle" @click="toggleDrawer('life')">
            <text class="drawer-title">生活工具</text>
            <text class="drawer-arrow">{{ openDrawer === 'life' ? '▼' : '▶' }}</text>
          </view>
          <view class="drawer-content" :class="{ 'drawer-content-open': openDrawer === 'life' }">
            <view class="tool-grid">
              <view class="tool-item" @click="navigateTo('/pages-sub/calendar-reward/index')">
                <image
                  class="tool-icon"
                  src="/static/icons/calendar.png"
                  mode="aspectFit"
                ></image>
                <text class="tool-name">日历奖励</text>
              </view>
              <view class="tool-item" @click="navigateTo('/pages-sub/calculator/childAllowance')">
                <image
                  class="tool-icon"
                  src="/static/icons/childAllowance.png"
                  mode="aspectFit"
                ></image>
                <text class="tool-name">育儿补贴</text>
              </view>
              <view class="tool-item" @click="navigateTo('/pages-sub/kin/index')">
                <image class="tool-icon" src="/static/icons/kin.png" mode="aspectFit"></image>
                <text class="tool-name">亲戚关系</text>
              </view>
              <view class="tool-item" @click="navigateTo('/pages-sub/remove/remove')">
                <image class="tool-icon" src="/static/icons/remove.png" mode="aspectFit"></image>
                <text class="tool-name">去水印</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 娱乐工具抽屉 -->
        <view class="drawer" :class="{ 'drawer-open': openDrawer === 'entertainment' }">
          <view class="drawer-handle" @click="toggleDrawer('entertainment')">
            <text class="drawer-title">娱乐工具</text>
            <text class="drawer-arrow">{{ openDrawer === 'entertainment' ? '▼' : '▶' }}</text>
          </view>
          <view
            class="drawer-content"
            :class="{ 'drawer-content-open': openDrawer === 'entertainment' }"
          >
            <view class="tool-grid">
              <view class="tool-item" @click="navigateTo('/pages-sub/mbti/index')">
                <image class="tool-icon" src="/static/icons/mbti.png" mode="aspectFit"></image>
                <text class="tool-name">MBTI测试</text>
              </view>
              <view class="tool-item" @click="navigateTo('/pages-sub/muyu/index')">
                <image class="tool-icon" src="/static/icons/muyu.png" mode="aspectFit"></image>
                <text class="tool-name">电子木鱼</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 工具箱底部 -->
      <view class="toolbox-bottom"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      openDrawer: 'health' // 默认打开健康工具抽屉
    }
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url
      })
    },
    toggleDrawer(drawer) {
      // 手风琴效果：如果点击的是当前打开的抽屉，则关闭它；否则打开点击的抽屉
      this.openDrawer = this.openDrawer === drawer ? '' : drawer
    }
  }
}
</script>

<style lang="scss">
.toolbox-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.header {
  margin-bottom: 20px;
  text-align: center;

  .title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
}

.toolbox {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 90%;
  margin: 0 auto;
}

/* 工具箱顶部 */
.toolbox-top {
  height: 30px;
  background: linear-gradient(to right, #795548, #8d6e63);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);

  .toolbox-handle {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 20px;
    background-color: #5d4037;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2);

    &:before {
      content: '';
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 5px;
      background-color: #3e2723;
      border-radius: 3px;
    }
  }
}

/* 工具箱主体 */
.toolbox-body {
  flex: 1;
  background: linear-gradient(to bottom, #8d6e63, #795548);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* 工具箱底部 */
.toolbox-bottom {
  height: 20px;
  background: linear-gradient(to right, #5d4037, #4e342e);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

/* 抽屉样式 */
.drawer {
  background-color: #efebe9;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;

  &.drawer-open {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    .drawer-handle {
      background-color: #5d4037;

      .drawer-title,
      .drawer-arrow {
        color: white;
      }
    }
  }
}

.drawer-handle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #d7ccc8;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.05);
  }

  &:active {
    background-color: #bcaaa4;
  }

  .drawer-title {
    font-size: 16px;
    font-weight: bold;
    color: #3e2723;
  }

  .drawer-arrow {
    font-size: 14px;
    color: #5d4037;
    transition: transform 0.3s ease;
  }
}

.drawer-content {
  overflow: hidden;
  transition: height 0.3s ease-in-out;
  background-color: #f5f5f5;
  animation-fill-mode: forwards;
}

/* 工具网格 */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  padding: 12px;
}

.tool-item {
  background-color: white;
  border-radius: 8px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 0.2s ease;

  &:before {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border: 1px dashed #d7ccc8;
    border-radius: 5px;
    pointer-events: none;
  }

  &:active {
    transform: translateY(2px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .tool-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 10px;
  }

  .tool-name {
    font-size: 14px;
    color: #3e2723;
    text-align: center;
  }
}

/* 抽屉内容区域 */
.drawer-content {
  max-height: 0;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.drawer-content-open {
  max-height: 500px; /* 足够大的高度以容纳内容 */
  opacity: 1;
}

/* 抽屉动画 */
@keyframes drawerOpen {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    opacity: 1;
  }
}

@keyframes drawerClose {
  from {
    max-height: 500px;
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}
</style>
